<template>
    <TechPopup :class="`review-choose-coupons-popup ${mode} ${styleMode}`" title="选择优惠券" v-model="showPopup" :haveClose="false" @close="close">
        <template v-if="couponList.length > 0">
            <Checkbox class="check-no-item checkbox-coupon-item title-color" v-model="isNoUse">
                不使用优惠券
                <MiniIcon v-if="isNoUse" class="check-icon" name="checkfill" />
                <MiniIcon v-else class="check-icon" name="checkcircle" :mode="mode" theme="#7D7D83" :styleMode="styleMode" />
            </Checkbox>
            <CheckboxGroup class="select-list-checkbox black-element-style" v-model="selectVal" @change="valChange">
                <Checkbox v-for="item in couponList" :key="item.id" class="checkbox-coupon-item" :name="item.sn">
                    <OrderCoupon :couponInfo="item" />
                    <div class="check-icon-element">
                        <MiniIcon v-if="selectVal.indexOf(item.sn) > -1" class="check-icon" name="checkfill" />
                        <MiniIcon v-else class="check-icon" name="checkcircle" :mode="mode" theme="#7D7D83" :styleMode="styleMode" />
                    </div>
                </Checkbox>
            </CheckboxGroup>
        </template>
        <Empty v-if="couponList.length === 0" type="discount" msg="无任何优惠券" :mode="mode" />
        <template slot="button">
            <Button class="tech-btn" :style="themeBackround" :round="buttonRound" size="large" @click="ensure">确定</Button>
        </template>
    </TechPopup>
</template>

<script>
import { Button, Checkbox, CheckboxGroup } from 'vant';
import { TechPopup, TechIcon, Empty, MiniIcon } from '@components/base';
import { OrderCoupon } from '@components/shop';
import ModeMixin from '@common/mixin';
import logger from '@common/logger';
export default {
    name: 'ReviewChooseCoupon',
    mixins: [ModeMixin],
    components: {
        TechPopup,
        TechIcon,
        Button,
        CheckboxGroup,
        Checkbox,
        OrderCoupon,
        Empty,
        MiniIcon,
    },
    props: {
        couponList: {
            type: Array,
            default: () => [],
        },
        useCoupon: {
            type: Array,
            default: () => [],
        },
    },
    watch: {
        isNoUse(val) {
            if (val) {
                this.selectVal = [];
            }
        },
        selectVal(val) {
            if (val && val.length > 0) {
                this.isNoUse = false;
            }
        },
    },
    data() {
        return {
            showPopup: false,
            isNoUse: true,
            selectVal: [],
        };
    },
    methods: {
        show() {
            this.showPopup = true;
            this.selectVal = this.$props.useCoupon;
            if (this.selectVal.length == 0) {
                this.isNoUse = true;
            }
        },
        close() {
            this.showPopup = false;
        },
        valChange(value) {
            console.log(value);
        },
        ensure() {
            logger.debugger('ChooseCoupon => 确认选择优惠券', this.selectVal);
            this.$emit('ensure', this.selectVal);
            this.close();
        },
    },
};
</script>

<style lang="less">
.review-choose-coupons-popup {
    .mode-white();
    .van-checkbox__icon {
        display: none;
    }
    .van-checkbox__label {
        .m-l(0);
        width: 100%;
        position: relative;
    }
    .check-no-item {
        height: 64px;
        background: #FFFFFF;
        border: 1px solid rgba(125,125,131,0.20);
        .p-h(@gap-md);
        box-shadow: 0 4px 16px -4px rgba(0,0,0,0.06);
        border-radius: 9px;
        .van-checkbox__label {
            height: 100%;
            .font-size-md();
            font-weight: 400;
            .flex();
            align-items: center;
            justify-content: space-between;
        }
    }
    .checkbox-coupon-item {
        .m-b(@gap-md);
    }
    .check-icon-element {
        position: absolute;
        right: @gap-md;
        top: 50%;
        margin-top: -11px;
    }
}
</style>
